<template>
  <div>
    <div class="research-box">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" @click="addRole">添加角色</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="dataSouse.list" border style="width: 100%">
      <el-table-column prop="roleId" label="ID" width="180" />
      <el-table-column prop="roleName" label="角色名称" width="180" />
      <el-table-column prop="authority" label="操作">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="change(scope.row)"> 修改权限 </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import 'element-plus/es/components/message/style/css'
import 'element-plus/es/components/message-box/style/css'
import { onMounted, reactive } from '@vue/runtime-core'
import { getRoleList } from '../../api/api'
import { roleInit, ListInit } from '../../type/role'
import { useRouter } from 'vue-router'
const router = useRouter()
const dataSouse = reactive(new roleInit())
const getRole = async () => {
  const res = await getRoleList()
  console.log('角色信息', res)
  dataSouse.list = res.data
}
const addRole = () => {
  ElMessageBox.prompt('请输入角色名称', '添加角色', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
    .then(({ value }) => {
      //value表示你在输入框中填写的值
      if (value) {
        //判断输入框是否有值，有就将值添加
        dataSouse.list.push({ roleId: dataSouse.list.length + 1, roleName: value, authority: [] })
      }
      ElMessage({
        type: 'success',
        message: `${value}角色添加成功！`,
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作！',
      })
    })
}
const change = (row: ListInit) => {
  console.log(row.roleId, row.authority)
  router.push({
    name: 'authority',
    params: {
      id: row.roleId,
      authority: row.authority,
    },
  })
  //query路由传参跳转
  // router.push({
  //   path: 'authority',
  //   query: {
  //     id: row.roleId,
  //     authority: row.authority.join(','),
  //   },
  // })
}
onMounted(() => {
  getRole()
})
</script>

<style lang="less" scoped></style>
